<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="section-0">
        <view class="section-body">
          <view class="tab">
            <view
              @click="setCurIdx(idx, item.name)"
              :class="`item ${curName === item.name ? 'item__active' : ''} ${
                curIdx + 1 === idx ? 'item__active_next' : ''
              }`"
              v-for="(item, idx) in tabList"
              :key="item.id"
            >
              <view class="label">
                {{ item.name }}
                <text class="count">{{ item.quantity }}</text>
              </view>
              <view class="shape">
                <view class="shape-body"></view>
              </view>
              <view class="shape shape-mirrow">
                <view class="shape-body"></view>
              </view>
            </view>
          </view>
          <view class="innercontent">
            <view class="list-container">
              <view class="header">
                <view class="item1">序号</view>
                <view class="item2">区域</view>
                <view class="item3">样板名称</view>
                <view class="item4"></view>
              </view>
              <view class="body">
                <view
                  class="row"
                  v-for="(item, index) in list"
                  :key="item.name"
                  @click="goto(item)"
                >
                  <view class="item1">{{ index + 1 }}</view>
                  <view class="item2">{{ item.area }}</view>
                  <view class="item3" v-if="item.not_count != 0"
                    >{{ item.template_name }}({{
                      item.all_count - item.not_count
                    }}/{{ item.all_count }})</view
                  >
                  <view class="item3" v-if="item.not_count == 0"
                    >{{ item.template_name }}({{ item.all_count }}/{{
                      item.all_count
                    }})
                  </view>
                  <view class="item4">
                    <image
                      src="../../../../static/weixian.png"
                      v-if="item.not_count != 0"
                      mode="aspectFit"
                      style="width: 12px; height: 12px"
                    ></image>
                    <image
                      src="../../../../static/anquan.png"
                      v-if="item.not_count == 0"
                      mode="aspectFit"
                      style="width: 12px; height: 12px"
                    ></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { getProjectListApi } from "@/api/statistics.js";
import { getProjectTemplateApi,getSampleStatistics } from "@/api/statistics.js";
import { mapGetters } from "vuex";

export default {
  onLoad() {
    this.id = this.curProject.id;
    this.getProjectListApi();
    this.fetchInfo();
    this.setCurIdx(0, "已执行");
  },
  data() {
    return {
      detailsList: [],
      list: [],
      name: "",
      curName: "执行中",
      curIdx: 0,
      mescroll: null,
      id: "",
      				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
      tabList: [
        {
          name: "已执行",
          id: 1,
          quantity: 0,
        },
        {
          name: "未执行",
          id: 2,
          quantity: 0,
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      curProject: "system/getCurProject",
    }),
  },

  methods: {
    goto(item) {
      if (item.not_count == 0) {
        uni.navigateTo({
          url: "demolistdetail?id=" + item.id,
        });
      } else {
        uni.navigateTo({
          url: "demolist?id=" + item.id,
        });
      }
    },

    async upCallback() {
      const {data} = await getSampleStatistics({
        project_id: this.id
      })
      console.log(data.data,1111);
      this.tabList[0].quantity=data.data.completed
      this.tabList[1].quantity=data.data.incomplete
      this.mescroll.endErr();
    },
    setCurIdx(idx, name) {
      this.curIdx = idx;
      this.curName = name;
      this.expandList = [];
    },

    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    async getProjectListApi() {
      let j = await getProjectListApi();
      if (j.data.code == 1) {
        this.detailsList = j.data.data;
        console.log(this.detailsList);
      }
    },
    async fetchInfo() {
      uni.showLoading({ title: "加载中..." });
      const { data } = await getProjectTemplateApi({ project_id: this.id });
      if (data.code === 1) {
        this.list = data.data;
        console.log(this.list);
      }
      uni.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fafbfd;
}
.section-0 {
  width: 100%;
  background-color: #3a5df5;
  .section-body {
    width: 100%;
    // padding-left: 40rpx;
    // padding-right: 40rpx;
    padding-bottom: 50rpx;
    background-color: #fafbfd;
    background-size: cover;
    background-repeat: no-repeat;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 0;
    padding: 0;
    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;

      .item {
        width: 50%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;

        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #fefefe;
          .count{
            margin-left: 20rpx;
          }
        }

        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;

          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }

        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;

          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }

      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;

        .label {
          color: #46464a;
        }

        .shape {
          display: block;
        }

        .shape-mirrow {
          display: none;
        }
      }

      .item__active_next {
        border-bottom-right-radius: 50rpx;

        .shape {
          display: none;
        }

        .shape-mirrow {
          display: block;
        }
      }
    }
    .innercontent {
      padding-left: 40rpx;
      padding-right: 40rpx;
      padding-top: 50rpx;
      .list-container {
        width: 100%;
        background: #fff;
        border-radius: 35rpx;
        box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
        margin-bottom: 65rpx;
        padding-top: 40rpx;
        padding-bottom: 40rpx;
        @include clear();
        position: relative;
        .body {
          margin: 0 auto;
          width: 636rpx;
          .row {
            width: 100%;
            height: 117rpx;
            // line-height: 124rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: solid 2rpx #e2e7f5;
            &:last-child {
              border-bottom: none;
            }
            .item1 {
              margin-top: 14rpx;
              width: 15%;
              text-align: center;
              // height: 60rpx;
              // line-height: 60rpx;
              font-size: 26rpx;
              flex-wrap: wrap;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: #3b3c40;
            }
            .item2 {
              margin-top: 14rpx;
              width: 30%;
              text-align: center;
              // height: 60rpx;
              // line-height: 60rpx;
              font-size: 26rpx;
              flex-wrap: wrap;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: #3b3c40;
            }
            .item3 {
              margin-top: 14rpx;
              width: 50%;
              text-align: center;
              // height: 60rpx;
              // line-height: 60rpx;
              font-size: 26rpx;
              flex-wrap: wrap;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: #3b3c40;
            }
            .item4 {
              margin-top: 14rpx;
              width: 5%;
              text-align: center;
              // height: 60rpx;
              // line-height: 60rpx;
              font-size: 26rpx;
              flex-wrap: wrap;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0rpx;
              color: #3b3c40;
            }
          }
        }
        .header {
          margin: 0 auto;
          width: 636rpx;
          height: 48rpx;
          background-color: #95c4fa;
          border-radius: 20rpx;
          display: flex;
          justify-content: space-between;
          .item1 {
            width: 15%;
            text-align: center;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
          .item2 {
            width: 30%;
            text-align: center;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
          .item3 {
            width: 50%;
            text-align: center;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
          .item4 {
            width: 5%;
            text-align: center;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 26rpx;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0rpx;
            color: #3b3c40;
          }
        }
      }
    }
  }
}
</style>
